/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList, CCell, Cell, Input, InputDatalist, InputIdProvider, Table, TableBody, TableHead, TableRow, Text,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {MemoDatesInput} from "../../../comp/base";
import {FootMenRow} from "../../contain/rarelyVary";
import {tail监检工} from "./orcBase";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";

const items工作内容 = [
    ['资设计', [{t:'单位资质', s: 3}, ], '设计单位', 'C'],
    ['资施工', [{} ], '施工单位', 'C' ],
    ['资无损检', [{} ], '无损检测机构', 'C' ],
    ['设计文', [{t:'技术文件', s: 3}, ], '设计文件（含变更）', 'C'],
    ['施组设', [{}], '施工组织设计', 'C' ],
    ['无损艺', [{}], '无损检测工艺', 'C' ],
    ['附件验', [{t:'材料', s: 3}, ], '管道元件和安全附件验收', 'C'],
    ['标志移', [{}], '材料标志移植', 'B' ],
    ['料代用', [{}], '材料代用', 'C' ],
    ['阀门', [], '阀门', 'C' ],
    ['补偿器', [], '补偿器', 'C/B' ],
    ['口加工', [], '管口加工、弯制、组对', 'C' ],
    ['焊工资', [{t:'焊接', s: 5}, ], '焊工', 'B'],
    ['焊艺文', [{}], '焊接工艺文件', 'C' ],
    ['焊材验', [{}], '焊接材料', 'C/B' ],
    ['施焊', [{}], '施焊', 'B' ],
    ['焊返修', [{}], '焊缝返修', 'C' ],
    ['损质系', [{t:'无损检测', s: 5}, ], '质保体系实施情况', 'B'],
    ['损测人', [{}], '无损检测人员', 'B'],
    ['损报告', [{}], '无损检测记录、报告', 'C' ],
    ['射线片', [{}], '射线检测底片', 'B' ],
    ['射线抽', [{}], '射线检测现场抽查', 'B' ],
    ['防腐', [], '防腐、保温', 'C' ],
    ['穿跨', [], '穿跨越工程', 'C' ],
    ['安附件', [], '安全附件', 'C/B' ],
    ['耐压试', [], '耐压试验', 'A' ],
    ['泄漏试', [], '泄漏试验（严密性试验）', 'B' ],
    ['干燥置换', [], '干燥与置换', 'C' ],
    ['竣工审', [], '竣工资料审查', '-' ],
];

export const itemA工作内容: string[] = ['工作备注'];
items工作内容.forEach(([name, title, initIsp], i: number) => {
    itemA工作内容.push(name as string);

});
const 检验结果选=['符合','不符合','无此项'];
const 监检方法选=['Z','ZW','W','X','ZWX','WX','ZX','WX'];
interface Props extends InternalItemProps {
    titles?: any[];
    //拆分的标签号码； 序号，以0为起点
    part: number;
}
const 工作备注选=['金口连头焊接时间在2021/1/11日',
]
const items工作1=items工作内容.slice(0,12);
const items工作2=items工作内容.slice(12,22);
const items工作3=items工作内容.slice(22);
/**监检工作内容和检验结果报告 : 按part参数 拆成形成 三个编辑器区域；
 * 对应报告JobResponsibiliVw组件。
 * 【淘汰】做法；
 * */
export const JobResponsibili =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, part,refWidth}: Props, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA工作内容,);
        const {inp, setInp} = useItemInputControl({ref});
        const config =0===part? items工作1: 1===part? items工作2: items工作3;
        const baseSeq=0===part? 0: 1===part? 12: 22;
        const titNode=useOmnipotentPrefTitle({config, baseSeq});
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text>{label}：</Text>

            {config.map(([name, _1, _2, unit]: any, i: number) => {
                //【特殊部分】 3个行的单位可以编辑的。配置也相应特殊指定u：null；的配置模式。
                return (<React.Fragment key={i}>
                    <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                        {titNode[i]} 类别{unit}；
                        监检方法
                        <InputIdProvider>
                            <InputDatalist value={(inp?.[name]?.c) || ''} datalist={监检方法选}
                                           style={{display: 'inline-flex', width: '5rem'}}
                                           onListChange={v => objNestSet(name,'c', v||undefined,inp,setInp) } />
                        </InputIdProvider>
                        &nbsp;检验结果
                        <InputIdProvider>
                            <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                           style={{display: 'inline-flex', width: '10rem'}}
                                           onListChange={v => objNestSet(name,'r', v||undefined,inp,setInp) } />
                        </InputIdProvider>
                        &nbsp;确认日期
                        <MemoDatesInput value={inp?.[name]?.d || ''} refWidth={refWidth}
                                        onChange={v => objNestSet(name,'d', v||undefined,inp,setInp) } />

                    </div>
                </React.Fragment>);
            })}

            {tail监检工}
            <Text variant="h4">备注：</Text>
            <BlobInputList  value={inp?.工作备注 ||''} rows={8} datalist={工作备注选}
                            onListChange={v => setInp({ ...inp, 工作备注: v || undefined}) } />
        </InspectRecordLayout>;
});

const tailRender = (orc: any, name: string) => <>
    <CCell>{orc?.[name]?.c ?? '／'}</CCell>
    <CCell>{orc?.[name]?.r ?? '／'}</CCell>
    <CCell>{orc?.[name]?.d ?? '／'}</CCell>
</>;
export const JobResponsibiliVw = ({orc, rep}: { orc: any, rep: any }
) => {
    const [renderP1,renderP2,renderP3] = useOmnipotentPrefCs({orc, config: items工作内容,
                    tag:'JobResponsibili', tailRender, pcols: 1, noNo: false, unitCel: true,split:[11,21]});
    return <>
        <div css={{"@media print": {paddingBottom: '8rem', pageBreakInside: 'avoid'}}}>
            <Text id='JobResponsibili' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>监检工作内容和检验结果报告</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["4%", "6%", "%", "4%", "5%","19%", "28%"] }
                css={{borderCollapse: 'collapse', "@media print": {marginTop: '-8rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell
                    colSpan={2}>检验项目</CCell><CCell><Text css={{fontSize: '0.75rem'}}>监检类别</Text></CCell>
                    <CCell>检验方法</CCell><CCell>检验结果</CCell><CCell>确认日期</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'JobResponsibili'}>
                    {renderP1}
                </RepLink>
                <RepLink rep={rep} tag={'JobResponsibili_12'}>
                    {renderP2}
                </RepLink>
                <RepLink rep={rep} tag={'JobResponsibili_22'}>
                    {renderP3}
                    <TableRow>
                        <Cell colSpan={7}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'
                            }}>备注：<br/>{orc.工作备注 || '／'}</div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
            <FootMenRow orc={orc} rep={rep} span={7} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
        </Table>
        {tail监检工}
    </>;
};
